<template>
	<!-- 门诊类型  
	0门诊挂号 普通号 
	1 门诊挂号名医号 
	3 门诊预约 普通号 
	4门诊预约名医号
	-->
	<vCommonPage type="1" :typeChose="$route.query.typeChose"
		:title="$route.query.code == 'mzyy' ? '门诊预约':'门诊挂号'" :mzlx="$route.query.mzlx">
		<div slot="customContent" class="tabPane">
			<div class="titleBox">
				请选择号别
			</div>
			<div class="doctorTypeBox">
				<!-- <div v-for="(item,index) in typeList" class="typeItemClass" v-if="item.regTypeId==0"> -->
					<!-- <div class="typeItemClassTop"></div> -->
					<!-- 普通号 -->
					<!-- <div class="commonType" v-if="item.regTypeId==0" @click="gotoCommonPage(item)"> -->
						<!-- {{item.title}} -->
						<!-- 挂号费:<span class="priceClass">{{item.regFeeLow?'￥'+item.regFeeLow:''}}</span> -->
					<!-- </div> -->


					<!-- 专家号 -->
					<!-- 					<div class="specialType" v-if="item.regTypeId==1" @click="gotoSpecialPage(item)">
						<div class="doctorNameClass">{{item.doctorName}}</div>
						<div class="doctorRoleClass"> {{item.docPost}}</div>
						<div class="departmentClass">{{item.deptName}} </div>
						<div class="priceClass"> {{item.regFeeHign?'￥'+item.regFeeHign:''}}</div>
					</div> -->
				<!-- </div> -->
				
				<div class="typeItemClass">
					<div class="typeItemClassTop"></div>
					<div class="commonType" @click="gotoCommonPage(1)">
						普通号
					</div>
				</div>
				<div class="typeItemClass">
					<div class="typeItemClassTop"></div>
					<div class="commonType" @click="gotoCommonPage(2)">
						专家号
					</div>
				</div>
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getDoctors,
		registerSource
	} from "@api/apiBox/mzyyAndMzgh"
	import {
		changeChineToDate,
		fun_date
	} from "../../assets/js/getTime.js"
	export default {
		name: "mzyyXzhb",
		data() {
			return {
				typeList: []
			};
		},
		methods: {
			//前往普通页面 type1 普通 2 名医
			async gotoCommonPage(type) {
				let mzlx = this.$route.query.mzlx;
				let item = {};
				if(this.typeList.length>0){
					item = this.typeList[0];
				}
				console.log(item, '前往普通页面')
				let code = this.$route.query.code;
				//存储医生信息 将普通号看成是一种医生
				this.$store.dispatch("appointment/updateDoctor", item); // 医生信息
				//如果是门诊 预约 普通号or名医号 则前往选择科室
				if (code == 'mzyy') {
					this.$router.push({
						name: "mzyyXzys",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '3',
							type: this.$route.query.type
						},
					})
				}
				//如果是门诊 挂号 普通号or名医号  则前往科室 
				else {
					//存储医生信息 将普通号看成是一种医生
					this.$store.dispatch("appointment/updateDoctor", item); // 医生信息
					this.$router.push({
						name: "mzyyXzys",
						query: {
							code: code,
							mzlx: mzlx,
							typeChose: '3',
							type: this.$route.query.type
						},
					})
				}
			},
			//前往名医页面 废弃
			async gotoSpecialPage(item) {
				let code = this.$route.query.code;
				//存储医生信息 将普通号看成是一种医生
				this.$store.dispatch("appointment/updateDoctor", item); // 医生信息
				//如果是门诊预约 名医号  则前往选择日期页面
				if (code == 'mzyy') {
					this.$router.push({
						name: "mzyyXzrq",
						query: {
							code: code,
							mzlx: '4',
							typeChose: '1'
						},
					})
				}
				//如果是门诊挂号 名医号 则直接前往确认挂号页面
				else {
					//通过获取号源接口存储项目信息
					await this.getItemIdAndSetRegInfo();
					this.$router.push({
						name: "mzyyQrghxx",
						query: {
							code: code,
							mzlx: '1',
							typeChose: '1'
						},
					})
				}
			},
			async getItemIdAndSetRegInfo() {
				//调用获取号源接口获取项目ID
				let mzlx = this.$route.query.mzlx;
				let code = this.$route.query.code;
				let deptId = '';
				//普通号 部门id存储在选择部门的时候
				if (mzlx == 3) {
					deptId = this.$store.state.appointment.department.deptId //部门ID
				}
				//名医号 部门id存储在选择医生的时候
				else if (mzlx == 4) {
					deptId = this.$store.state.appointment.doctor.deptId //部门ID
				}
				var data = {
					data: {
						hospId: this.$store.state.terminfo.hospId, //医院ID
						beginDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
						endDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
						deptId: deptId
					},
					that: this
				}
				let res = await registerSource(data);
				if (res.data.length > 0) {
					let regInfoData = res.data[0];
					regInfoData.regFee = regInfoData.fee;
					regInfoData.regTime = changeChineToDate(new Date(), 'YYYY-MM-DD');
					this.$store.dispatch("appointment/updateRegInfo", regInfoData); // 日期信息
					this.$store.dispatch("appointment/updateDepartment", regInfoData); // 科室信息
					this.$store.dispatch("appointment/updateDoctor", regInfoData); // 医生信息
				}
			},
			async init() {
				let code = this.$route.query.code;
				var data = {
					data: {
						hospId: this.$store.state.terminfo.hospId, //医院ID
						beginDate: '',
						endDate: ''
					},
					that: this
				}
				if (code == 'mzyy') {
					data.data.beginDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
					data.data.endDate = fun_date(7);
				} else if (code == 'mzgh') {
					data.data.beginDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
					data.data.endDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
				}
				const res = await getDoctors(data);
				this.typeList = res.data;
				for (let item of this.typeList) {
					if (item.regTypeId == 1) {
						item.regFee = item.regFeeHign;
					} else if (item.regTypeId == 0) {
						item.regFee = item.regFeeLow;
					}
				}
				console.log(this.typeList, 'typeList')
			}
		},
		computed: {},
		components: {},
		mounted() {

		},
		created() {
			console.log(this.$store.state, 'sss')
			this.init();

		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.titleBox {
		width: 100%;
		text-align: center;
		font-size: 4.375rem;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #435C7A;
		margin-top: 2.1875rem;
		margin-bottom: 1.25rem;
	}

	.doctorTypeBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500px;
	}

	.typeItemClass {
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		margin: 10px 25px;

		.typeItemClassTop {
			width: 20.5rem;
			height: 6.25rem;
			background: #EEF8FD;
			border-radius: 8px 8px 0px 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2.5rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
		}

		.specialType {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			text-align: center;

			.doctorNameClass {
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				width: 46%;
				padding-left: 4%;
				margin-top: 26px;
			}

			.doctorRoleClass {
				font-size: 28px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #A1ADBB;
				width: 50%;
				margin-top: 26px;
			}

			.departmentClass {
				font-size: 28px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				width: 46%;
				padding-left: 4%;
				margin-top: 10px;

			}

			.priceClass {
				font-size: 28px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FE5F5F;
				width: 50%;
				margin-top: 10px;
			}
		}

		.commonType {
			height: 4.625rem;
			padding: 2rem 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2.85rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			text-align: center;
			color: #435C7A;

			.priceClass {
				font-weight: bold;
				color: #FE5F5F;
			}
		}
	}
</style>
